<template>
	<div class="detailwarp">
		
		<div class="hongbao" v-show="showhongbao" style="background:rgba(118,80,16,0.1);">
			<transition name="backimg" >
			<span  v-if="showopened&&!showotherhongbao"  class="backimg"></span>
			</transition>
			<img v-show="showopened &&!showotherhongbao"  v-on:enter="enter" src="../../static/images/slidetop1.png" class="slidetop">
			
			<div :style="bottombackground" v-show="showopened &&!showotherhongbao"  class="slidebottom">
			</div>
			<!--<transition name="open">
			<img @click="openhongbao" v-if="showopen" src="../../static/images/open.png" class="open">
			</transition>-->
			<div class="hongbaoanimate" v-if="showrain">
			<img @click="openedhongbao()" src="../../static/images/smallbao.png" v-for="(item,index) in hongbaorain" :key="index" :style="{left:item}">
			</div>
			<div  v-if="showopened &&!showotherhongbao">
			<img @click.stop.prevent="overhongbao" src="../../static/images/surebutton.png" class="slidebutton">
			<h3 class="slidegongxi">恭喜你获得</h3>
			<div class="slidetext" :style="textbackground">红包：{{realhongbaomoney}}元</div>
			<div class="doubletext" v-if="showotherhongbao">{{otherhongbao}}</div>
			</div>
			
			<div class="jingxi" v-show="showjingxi" :style="jingxibackground">
				<p>{{realhongbaomoney}}元</p>
				<img @click="toshowfenxiang" src="../../static/images/jingxiused.png"/>
				<img @click="overhongbao" src="../../static/images/jingxinotused.png"/>
			</div>

			<div class="beginfenxiang" v-if="showfenxiang">
			<img src="../../static/images/fenxiang.png"/>
			<p @click="overhongbao">取消</p>
			</div>
		</div>
		<vue-loading v-show="showload" type="bubbles" style="position:absolute;left:0;top:0;background:white;z-index:100;" color="#d9544e" :size="{ width: '100%', height: '100%' }"></vue-loading>
		<div class="nav-title">
			<i class="i back icon-arrow_lift" @click="todetail"></i>
			<div class="firsearth" @click="beginsearth" style="">
				<img  src="../../static/images/searth.png" style="width: 0.55rem; height: 0.54rem;padding: 0.1rem 0.1rem;box-sizing: border-box;" />
				<span v-if="showsousuo" class="sousuo" style="font-size:normal ;color: black; vertical-align: top; box-sizing: border-box; height: 0.24rem;line-height: 0.60rem;font-size: 0.3rem;background: white;">拼音搜索 快速点餐</span>
            <span @click.stop.prevent="goback" v-if="showbackright" class="imgright" style="display: block; z-index: 500; background: rgba(21,21,12,0); width: 0.75rem;line-height: 0.33rem; height: 0.54rem;padding: 0.1rem 0.1rem;font-size: 0.25rem;display: block;position: absolute;right: 0.5rem;top: 0.2rem;">返回</span>
            <input v-if="showinput"  v-model="searthtext" class="searthtext" type="text" />
			</div>		
			</div>
			<div class="warpwarp">
			<somefood v-on:triggerspecif="tospecif" v-if="showsearth" :searthedfood=searthedfood></somefood>
		<div class="g-menu-warper" ref="menuWraper">
		<ul style="padding-bottom: 1rem;">
		<li v-for="(item,index) in goods" class="g-menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
			<num :foodtype=item></num>
			<div class="g-menu-text">
				{{item.name}}
				</div>
		</li>
		</ul>
		</div>
		<div class="g-goods-warper" ref="foodWraper">
			<ul class="bigwarper">
				<li v-for="(item,index) in goods" class="g-food-list food-list-hook">
					<h1 class="g-title">{{item.name}}</h1>
					<ul>
						<li v-for="(food,index1) in item.list" class="g-in-food" >
							<div class="g-in-icon">
								<img @click="selectFood(food,$event)" :src="food.src | imgurl" />
							</div>
							<div class="g-in-content">
								<h2 class="g-in-name">{{food.listName}}</h2>
								<div class="g-in-price">
									<span class="g-new">￥{{food.listin[0].price}}/{{food.listin[0].listName}}</span>
									<span class="g-old" v-show="food.oldPrice">￥{{food.listin[0].price}}</span>
								</div>
								<div class="cartwraper">
									<change v-on:cartadd="_drop" v-if="food.listin.length==1" :food="food.listin[0]"></change>
									<div v-else class="specif" @click.stop="tospecif(food)">
										<num :foodtype=food></num>
										选规格
									</div>
								</div>
							</div>
						</li>
					</ul>
				</li>
				<p>我是有底线滴！！</p>
			</ul>
		</div>
		</div>
	<shopcart v-on:change="changefood" v-on:save="savestorage" :goon="goon" v-on:chang="selectFoods" ref="shopcart" :aa="aa"  :selectFood="selectFoods"></shopcart>
	<food :food="selectdFood" v-if="foodshow" ref="food1" v-on:change="changefood"></food>
	<transition name="specif">
	<specif v-if="showspecif" :foodspecif="specif" v-on:changespecif="tospecif"></specif>
	</transition>
	
	</div>
</template>

<script>
import qs from 'qs'

	import vueLoading from 'vue-loading-template'
	import somefood from './food/somefood'
	import num from './food/num'
	import specif from './specif/specif'
	import food from './food/food'
	import change from './shopcart/change'
	import BScroll from 'better-scroll'
	import shopcart from './shopcart/shopcart'
	import PinYin from './specif/searth'


	var timer
	export default{
		data() {
			return {
				hongbaorain:[
					'1rem',
				],
				showopened:false,
				showfenxiang:false,
				showjingxi:false,
				showrain:false,
				showopen:false,
				listHeight:[],//
				scrollY:0,//纵向滚动距离
				selectdFood:{
				"id": "b58b21e2bc51493aabb8ffc5313e58f3",
				"typeid": "2435fc955d2c437cb982a405699d4952",
				"listName": "盖饭",
				"num": 0,
				"src": "/houtai/userfiles/a9c96f956fd1499a9d5c4625c2905e5a/images/seller/foodManage/2017/10/%E9%BA%BB%E8%BE%A3%E8%92%9C%E9%A6%99%E8%B1%86%E8%85%90.jpg",
				"orprice": 0.01,
				"price": 0.01,
				"listin": [
					{
						"id": "d0344ede7e434df1864a95b25e84c682",
						"isNewRecord": false,
						"foodid": "b58b21e2bc51493aabb8ffc5313e58f3",
						"foodspecsid": "98d92f70cfb04df38b371717807c90ea",
						"price": 0.01,
						"nowprice": 0.01,
						"fooddescriotion": "",
						"listName": "份",
						"num": 0,
						"foodname": "盖饭"
					}
				]
			},//单个菜品信息
				a:1,
				touchtime:0,
				showload:true,
				specif:{},//单个菜品规格信息
				showspecif:false,//是否显示规格界面
				showsousuo:true,
				showbackright:false,
				showinput:false,
				searthtext:'',
				showsearth:false,
				goon:false,
				otherhongbao:'惊喜',
				foodshow:false,
				jingxibackground:{
					backgroundImage:"url("+require("../../static/images/jingxi.jpg")+")",
					backgroundSize:"100% 100%"
				},
				background:{        //会员卡背景图片
					backgroundImage:"url(" + require("../../static/images/background.png") + ")",
					backgroundSize:"100% 100%"
				},
				textbackground:{        //会员卡背景图片
				backgroundImage:"url(" + require("../../static/images/slidetext.png") + ")",
				backgroundSize:"100% 100%"
				},
				bottombackground:{        //会员卡背景图片
				backgroundImage:"url(" + require("../../static/images/slidebottom1.png") + ")",
				backgroundSize:"100% auto",
				backgroundPosition: "bottom center",
				backgroundRepeat:"no-repeat"
				},
			}
		},
		props:['goods'],
		computed:{
			showotherhongbao:function(){
				this.otherhongbao=this.$store.state.otherhongbaotext
				return this.$store.state.showotherhongbao
			},
			realhongbaomoney:function(){
				return this.$store.state.showhongbao;
			},
			showhongbao:function(){
				var _this=this
				if(this.$store.state.whethershowhongbao==true){
					this.showrain=true
				var pushtimer=	setInterval(function(){
					var suiji=Math.random()*2.5-0.5+'rem'
				
						_this.hongbaorain.push(suiji)
						
					},1000)
					
				
					setTimeout(function(){
						clearInterval(pushtimer)
					
						
					},6000)
				}
				return this.$store.state.whethershowhongbao
			},
			showhongbao2:function(){
				return this.$store.state.whethershowhongbao2
			},
			showhongbao3:function(){
				return this.$store.state.whethershowhongbao3
			},
			searthedfood:function(){
				var _this=this
				let searthfood=[]
				this.goods.forEach(function(good){
					good.list.forEach(function(food){
						if(_this.test(_this.topinyin(food.listName),_this.topinyin(_this.searthtext))==_this.test(_this.topinyin(_this.searthtext),_this.topinyin(_this.searthtext))&&_this.topinyin(_this.searthtext).length>0){
							searthfood.push(food)
						}
					});
				});
				return searthfood
			},
			aa:function(){
				return [{
					a:this.a
				}]
			},
			currentIndex:function(){
				for(var i=0;i<this.listHeight.length;i++){
					var height1=this.listHeight[i];
					var height2=this.listHeight[i+1];
					if(!height2 || this.scrollY>=height1&&this.scrollY<height2){
						if(i>6){
							this.menuScroll.scrollTo(0,-(document.documentElement.clientWidth/7.5*1.2*(i-7)),100)
						}
						else{
							this.menuScroll.scrollTo(0,0,110)
						}
						return i;
					}
				}
				return 0;
			},
			selectFoods:function(){
				var _this=this
				setTimeout(function(){
					localStorage.order=JSON.stringify(_this.goods)
				})
				var foodss=[];
				var hongbaonum11=0
				var whetherdouble=false
				var whetherjingxi=false
				this.goods.forEach(function(good){
					good.list.forEach(function(food){
						food.listin.forEach(function(foodin){
							if(foodin.num>0){
							foodss.push(foodin);
						}
						if(foodin.hongbao.length>0){
							hongbaonum11+=foodin.hongbao.length
						}
						if(foodin.doublehongbao){
							whetherdouble=true
						}
						if(foodin.jingxiused){
							whetherjingxi=true
						}
						})
					});
				});
				this.$store.commit("gethongbaonum",hongbaonum11);
				if(whetherdouble){
				
					this.$store.commit("getdoubleused");
					this.$store.commit("getdoublenumused");
					this.$store.commit("getdoubleuseded");
					this.$store.commit("getdoublenumuseded");
				}
				if(whetherjingxi){
					this.$store.commit("getjingxiused");
				}
				return foodss;
				
			}
		},
		mounted:function(){
			var _this=this
			this.initweixin()
			if(this.goods==''){
				return
			}
			this.$nextTick(function(){
				_this.initScroll();
					_this.caclulateHeight();
			})
	    },
	  filters: {
        imgurl: function(value) {
            return 'http://www.dadu999.com'+value;
        }
    },
	  methods:{
			openedhongbao:function(){
				this.showopened=true
				this.showrain=false
				if(this.showotherhongbao){
					this.showjingxi=true
				}
				else{
					this.showjingxi=false
				}
			},
			initweixin:function(){
				var _this=this;
				this.$http.post(sessionStorage.baseurl+"/a/phone/share",qs.stringify({openid:sessionStorage.openid,token:sessionStorage.token,sellerid:sessionStorage.sellerid,url:location.href.split('#')[0]}))
				.then(res=>{
					if(res.data.code==1){
						console.log(res.data)
						wx.config({ 
								     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打
								 
								      appId: res.data.data.appId, // 必填，公众号的唯一标识 
								      timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳 
								      nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串 
								      signature:res.data.data.signature, // 必填，签名，见附录1 
								      jsApiList: [
								          'onMenuShareTimeline',
													'onMenuShareAppMessage',
													'startRecord'
								     ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
								 });

					}
					else{
						alert(res.data.msg)
					}
				})
				.catch(error=>{
					alert(error)
				})
			},
			openhongbao:function(){
				if(this.showopen){
					var _this=this
				this.showopen=false
				this.showjingxi=false
				this.showfenxiang=false
				setTimeout(function(){
					_this.showopened=true
				},1500)
				}
			},
		  enter:function(){
			  
			},
			toshowfenxiang:function(){
				var _this=this
				this.showfenxiang=true;
				wx.onMenuShareTimeline({
												title: '一菜一红包，我在'+JSON.parse(localStorage.sellerData).sellername+'点'+_this.$store.state.justprice+'元菜，竟送'+_this.$store.state.showhongbao+'元红包,味道很ok，地址', // 分享标题
												link:sessionStorage.baseurl+ '/a/mobile/address?sellerid='+sessionStorage.sellerid+'&hongbaomoney='+_this.$store.state.showhongbao, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
												imgUrl:'http://www.dadu999.com/houtai/static/h5/images/baomanlogo.png',
												success: function () {
														_this.$http.post(sessionStorage.baseurl+"/a/phone/shareSuccess",qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token}))
														.then(res=>{
															if(res.data.code==1){
																_this.overhongbao()
															}
															else{
																alert(res.data.msg)
															}
														})
														.catch(error=>{
															alert(error)
														})
												},
												cancel: function () {
												alert("分享失败")
												}
										
			 })

												wx.onMenuShareAppMessage({
								title: '发红包了', // 分享标题
								desc: '一菜一红包，我在'+JSON.parse(localStorage.sellerData).sellername+'点'+_this.$store.state.justprice+'元菜，竟送'+_this.$store.state.showhongbao+'元红包,味道很ok，地址', // 分享描述
								link:sessionStorage.baseurl+ '/a/mobile/address?sellerid='+sessionStorage.sellerid+'&hongbaomoney='+_this.$store.state.showhongbao, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl:'http://www.dadu999.com/houtai/static/h5/images/baomanlogo.png', // 分享图标
								type: '', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function () {
									_this.$http.post(sessionStorage.baseurl+"/a/phone/shareSuccess",qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token}))
														.then(res=>{
															if(res.data.code==1){
																_this.overhongbao()
															}
															else{
																alert(res.data.msg)
															}
														})
														.catch(error=>{
															alert(error)
														})
								// 用户确认分享后执行的回调函数
								},
								cancel: function () {
									alert("分享失败")
								// 用户取消分享后执行的回调函数
								}
							});

			},
		  overhongbao:function(){
				this.showopened=false
				this.showopen=true
				this.showjingxi=false
				this.showfenxiang=false
				this.hongbaorain=[]
			  this.$store.commit("stophongbao")
		  },
		  todetail:function(){
			  window.location.href=sessionStorage.mainurl
		  },
		  savestorage:function(){
			  sessionStorage.order=JSON.stringify(this.goods)
		  },
	  	  occur:function(){
	  	  	var _this=this
	  	  	setTimeout(function(){
	  	  		_this.initScroll();
			_this.caclulateHeight();
	  	  	})
	  	  },
	  	  topinyin:function(l1) {
             var l2 = l1.length;
							var I1 = "";
							var reg = new RegExp('[a-zA-Z0-9\- ]');
							for (var i = 0; i < l2; i++) {
 							var val = l1.substr(i, 1);
 							var name =this.arraySearch(val, PinYin);
 							if (reg.test(val)) {
  						I1 += val;
 							} else if (name !== false) {
  							I1 += name;
 							}
							}
								I1 = I1.replace(/ /g, '-');
								while (I1.indexOf('--') > 0) {
 								I1 = I1.replace('--', '-');
									}
								return I1;
						},
				arraySearch:function(l1,l2){
								for (var name in PinYin) {
 								if (PinYin[name].indexOf(l1) != -1) {
  										return this.ucfirst(name);
 										 break;
 								}
								}
									return false;
								},
				ucfirst:function(l1){
									if (l1.length > 0) {
 								var first = l1.substr(0, 1);
 								var spare = l1.substr(1, l1.length);
 								return first + spare;
								}
							},
	    	test:function(s1,s2){
                var list=[]
                let flag=true
                //将s1拆分
                var s1strs = s1.split("");
                for(var i = 0; i < s1strs.length; i++){
                	flag=true
                    for(var j=0;j<list.length;j++){
                    	if(list[j]==s1strs[i]){
                    		flag=false
                    	}
                    }
                    if(flag){
                    	list.push(s1strs[i]);
                    }
                }
                var count = 0;
                for(var z = 0; z < list.length;z++){
                    if(s2.indexOf(list[z]) != -1){
                        count ++;
                    }
                }
                 return count
           },
	    	beginsearth:function(){
	    		if(!this.showinput)
	             this.showinput=true
	             this.showsearth=true
	             this.showsousuo=false
			setTimeout(function(){
				document.getElementsByClassName("searthtext")[0].focus()
			})
	             this.showbackright=true
	    	},
	    	gosearth:function(){
	    			$(".imgright").show()
	         $(".search").show()
	          $(".sousuo").hide()
	          $(".search").css("transform","translateX(0)")
	    	},
	    	_drop:function(target){
	    		this.$refs.shopcart.drop(target)
	    	},
	    	goback:function(){
	    		this.showinput=false
	        this.showsousuo=true
	        this.showbackright=false
	        this.showsearth=false
	    	},
	    	tospecif:function(food){
	    		if(food){
	    			this.specif=food
	    		}
	    		this.showspecif=!this.showspecif
	    	},
	    	selectFood:function(food,$event){
	    		if(!$event._constructed){
	    			return;
	    		}
	    		this.goon=true
	    		this.selectdFood=food;
	    		this.foodshow=true;
	    		this.$nextTick(function(){
	    		this.$refs.food1.show1()
	    		})
	    	},
	    	changefood:function(){
	    		this.goon=false
	    		this.foodshow=false;
	    	},
	    	selectMenu:function(index,$event){
	    		if(!$event._constructed){
	    			return;
	    		}
	    		var foodlist=this.$refs.foodWraper.getElementsByClassName("food-list-hook");
	    		var el=foodlist[index];
	    		this.foodScroll.scrollTo(0,-this.listHeight[index],500);
	    	},
//	    	getGoods:function(){
//				//this.$store.state.good=_this.goods
//				this.$nextTick(function(){
//					this.initScroll();
//					this.caclulateHeight();
//				})
//	    	},
	    	initScroll:function(){
	    		this.showload=false
	    		var _this=this;
	    		this.menuScroll=new BScroll(this.$refs.menuWraper,{
	    			click:true
	    		});
	    		this.foodScroll=new BScroll(this.$refs.foodWraper,{
	    			click:true,
	    			probeType:3
	    		});
	    		this.foodScroll.on('scroll',function(pos){
	    			_this.scrollY=Math.abs(Math.round(pos.y));
	    		});
	    	},
	    	caclulateHeight:function(){
	    		var foodlist=this.$refs.foodWraper.getElementsByClassName("food-list-hook");
	    		var height=0;
	    		this.listHeight.push(height);
	    		for(var i=0;i<foodlist.length;i++){
	    			height+=foodlist[i].clientHeight;
	    			this.listHeight.push(height);
	    		}
	    	}
	    },
	  components:{
	    	shopcart,
	    	change,
	    	food,
	    	specif,
	    	num,
	    	vueLoading,
	    	somefood
	   },
	   events:{
	   	'cart.add'(target){
	   		this._drop(target)
	   	}
	   }
	}
</script>

<style lang="stylus" scoped="scoped">
.detailwarp
  display flex
  height 100%
  width 100%
  overflow hidden
  perspective 800px
  flex-direction column
  .hongbao
    position fixed
    width 100%
    height 100%
    z-index 1000
    perspective 8000
    .beginfenxiang
      position absolute
      left 0
      top 0
      z-idnex 10000
      width 100%
      height 100%
      background rgba(0,0,0,0.9)
      img
        width 100%
        margin 0
      p
        width 80%
        height 1rem
        left 10%
        line-height 1rem
        font-size 0.4rem
        text-align center
        color white
        position absolute
        bottom 1rem
    .jingxi
      position absolute
      width 5.5rem
      left 15%
      height 7rem
      bottom 3rem
      p
        width 100%
        position absolute
        top 1rem
        font-size 0.3rem
        line-height 0.6rem
      img
        width 60%
        left 20%
        position absolute
        bottom 1.5rem
        &:last-child
          bottom 0.7rem
    .hongbaoanimate
      position fixed
      width 100%
      height 100%
      background rgba(0,0,0,0.6)
      overflow hidden
      img
        width 5rem
        position absolute
        padding 0.5rem
        animation liu 6s linear infinite
    .open
      position absolute
      width 100%
      bottom 2rem
      left 0
      z-index 1000
    .backimg
      position absolute
      width 200%
      left -50%
      height 150%
      bottom -25%
    .doubletext
      position absolute
      width 40%
      left 30%
      text-align center
      font-size 0.3rem
      height 0.5rem
      line-height 0.5rem
      color white
      bottom 4.9rem
    .slidegongxi
      position absolute
      width 100%
      line-height 0.6rem
      text-align center
      font-size 0.4rem
      bottom 5.4rem
      color white
    .slidetext
      position absolute
      width 40%
      left 30%
      text-align center
      font-size 0.3rem
      height 0.5rem
      line-height 0.5rem
      color white
      bottom 4.3rem
    .slidetop
      position absolute
      transition 0.5s
      width 70%
      left 15%
      bottom 3rem
    .slidebottom
      position absolute
      width 70%
      left 15%
      min-height 80%
      bottom 3rem
    .slidebutton
      position absolute
      width 60%
      left 20%
      bottom 3.1rem
  .nav-title
    width 100%
    box-shadow:0rem 0.01rem 0.1rem 0.03rem black
    flex-basis 0.88rem
    background white
    z-index 1
    top 0
    left 0
    box-sizing border-box
    padding-left 10%
    .back
      font-size 0.3rem
      position absolute
      left 0.2rem
      top 0.3rem
    .firsearth
      width 90%
      height 0.6rem
      margin 0.13rem 5%
      border 0.01rem solid black
      border-radius 0.1rem
      .searthtext
        width 5rem
        height 0.4rem
        font-size 0.3rem
        margin-top 0.1rem
        margin-right 0.5rem
        display inline
        float right	
  .warpwarp
    flex 1
    overflow hidden
    display flex
    flex-direction row
    overflow hidden			
	.g-menu-warper
	  float left
	  flex 1.5rem
	  background white
	  line-height 1rem           
	  ul
	    li,.current
	      display table
	      padding 0
	      height 1.2rem
	      width 100%
	      text-align center
	      font-size 0.27rem
	      line-height 1.2
	      i
	        position absolute
	        line-height 0.25rem
	        background #db2244
	        width 0.25rem
	        height 0.25rem
	        border-radius 50%
	        right 0
	        color white
	        font-weight 700
	        font-size 0.2rem  
	      .g-menu-text
	        display table-cell
	        vertical-align middle
	        text-align center
	        font-size 0.3rem
	    .current
	      background #f5ce9d
	      border-radius 0.05rem
	      border-left 0.1rem solid #db2244
	.g-goods-warper
	  flex 6rem
	  float left
	  .g-title
	    height 0.3rem
	    line-height 0.35rem
	    font-size 0.27rem
	    font-weight 700
	    color black
	    margin-left 0.45rem
	    text-align left
	    border-left 2px solid #00a0dc
	    padding-left 0.2rem
	  .bigwarper
	    p
	      font-size 0.3rem
	      line-height 0.6rem
	    li
	      padding-top 0.2rem
	    ul
	      margin-top 0.2rem
	    .g-in-food
	      padding-bottom 18px
	      display flex
	      margin 0 0.2rem
	      border-bottom 1px solid rgba(7,17,27,0.1)
	      &:last-child
	        border-bottom 1px solid #ddd
	        margin-bottom 0
	      .g-in-icon
	        flex 0 0 2rem 
	        img
	          width: 1.5rem;
	          height: 1.5rem;
	          border-radius 0.1rem
	      .g-in-content
	        flex 1
	        position relative
	        .g-in-name
	          text-align left
	          padding-left 0.2rem
	          margin 2px 0 2px 0
	          line-height 0.4rem
	          font-size 0.35rem
	          font-weight: 700;
	          color rgb(7,17,27)
	        .g-in-price
	          position absolute
	          font-weight 700
	          bottom 0.05rem
	          line-height 0.5rem
	          text-align left
	          padding-left 0.2rem
	          span
	            font-size 0.3rem 
	            color red
					.cartwraper
            position absolute
            right 0
            bottom 0
            z-index 20
            .specif
              width 1rem
              position absolute
              right 0
              height 0.5rem
              bottom 0
              background RGB(255,97,3)
              font-size 0.23rem
              color white
              border-radius 0.5rem	           
              line-height 0.54rem
              font-weight 700
              i
                width 0.25rem
                height 0.25rem
                position absolute
                right -0.1rem
                top -0.1rem
                border-radius 50%
                color white
                line-height 0.2rem
                background #db2244
                font-weight 700
                font-size 0.2rem
  .specif-enter-active,.specif-leave-active
    transition all 0.4s ease-in-out              
  .specif-enter,.specif-leave-to
    transform translateY(-100%);
  .specif-leave,.specif-enter-to
    transform translateY(0);

  .topslide-enter-active,.topslide-leave-active
    transition all 0.5s ease-in-out
  .topslide-enter
    transform translateY(60px)
  .topslide-leave,.topslide-enter-to
    transform translateY(0)

  .backimg-leave,.backimg-enter-to
    animate backimgani 1s linear

  .open-leave-to
	  transform rotateY(360deg)
  .open-leave-active
	  transition 1.5s

@keyframes backimgani {
  0% {
    transform: rotateZ(0deg) translateZ(-1600px);
  }
  100% {
    transform: rotateZ(180deg) translateZ(-1600px);
  }
}
@keyframes liu {
	0%{
		transform:translateY(1rem)
	}
	100%{
		transform:translateY(15rem)
	}
}
@keyframes colorchange {
	0%{
		color:black
	}
	50%{
		color:red
	}
	100%{
		color:black
	}
}
</style>